import React from 'react'
import { TabBar } from 'antd-mobile'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
const item = TabBar.Item
// 老板容器主界面
class NavFooter extends React.Component {
  static propTypes = {
    navList: PropTypes.array.isRequired,
    unReadCount: PropTypes.number.isRequired
  }
  render() {
    let { navList, unReadCount } = this.props
    navList = navList.filter(nav => !nav.hide)
    const path = this.props.location.pathname
    return (
      <TabBar>
        {navList.map(item => (
          <TabBar.Item
            title={item.title}
            key={item.title}
            badge={item.path === '/message' ? unReadCount : 0}
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(http://119.3.254.20:3000/public/nav/${item.icon}.png) center center /  21px 21px no-repeat`
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(http://119.3.254.20:3000/public/nav/${item.icon}-selected.png) center center /  21px 21px no-repeat`
                }}
              />
            }
            selected={path === item.path}
            onPress={() => this.props.history.replace(item.path)}
          ></TabBar.Item>
        ))}
      </TabBar>
    )
  }
}
export default withRouter(NavFooter)
